<template>
    <div class="addressContainer">
        <mt-header title="搜索地址">
            <router-link to="/buyAddress" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="searchHeader">
            <el-input placeholder="请输入地址" v-model="address" clearable></el-input>
            <button @click.prevent="searchAddress">搜索</button>
        </div>
        <div v-for="(item,index) in searchList" :key="index">
            <div class="box" @click="clickButton(item)">
                <p class="p1">{{item.name}}</p>
                <p class="p2">{{item.address}}</p>
            </div>
        </div>
    </div>    
</template>
<script>
    import axios from 'axios'
    import {mapMutations} from 'vuex'
    export default{
        data(){
            return{
                address:'',
                searchList:[]
            }
        },
        mounted(){
        },
        methods:{
            ...mapMutations(['setAddress']),
            clickButton(item){
                this.setAddress(item),
                console.log(item);
                this.$router.push({path:'/buyAddress'});
            },
            searchAddress(){
                axios({
                    url:"https://restapi.amap.com/v3/assistant/inputtips",
                    params:{
                        method:'get',
                        key:'78f22165eadeccc2e2cbba9b6881dfb9',
                        keywords:this.address,
                    }
                }).then(response=>{
                    if(response.status==1){
                        this.searchList=response.tips;
                    }else if(response.status==0){
                        console.log("失败");
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../style/mixin';
    @import 'mint-ui/lib/style.css';
    *{
        margin: 0;
        padding: 0;
    }
    .addressContainer{
        @include white;
        position: relative;
        .searchHeader{
            @include width-height(100%,3rem);
            @include white;
            padding-top: 0.5rem;
            display: grid;
            grid-template-columns: 75% 25%;
            grid-template-rows: 100%;
            /deep/ .el-input{
                width:96%;
                padding-left:0.5rem;
            }
            /deep/ .el-input__inner{
                @include width-height(100%,2.4rem);
                border: 1px solid #e1e1e1;
                border-radius: 0.2rem;
                @include font-size-color(1.1rem,#000);
                padding-left:0.5rem;
            }
            button{
                @include width-height(100%,2.4rem);
                @include blue;
                @include font-size-color(1.1rem,#fff);
                border-radius: 0.2rem;
                border: 1px solid #26a2ff;
            }
        }
        .box{
            padding-top: 0.5rem;
            @include width-height(95%,3.5rem);
            margin:0 0 0.5rem 2.5%;
            grid-template-rows: 60% 40%;
            grid-template-columns:100%;
            background-color: #fff;
            p{
                padding: 0 0.5rem 0 0.5rem;
            }
            .p1{
                @include font-size-color(1.2rem,#000);
            }
            .p2{
                @include font-size-color(1rem,#666);
            }
        }
    }
</style>
